{"ast":null,"code":"import _slicedToArray from\"/Users/poppie/Desktop/development/messenger/app/frontend/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";import React from'react';import{FaChevronLeft,FaChevronRight}from'react-icons/fa';import'./Carousel.scss';import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var Carousel=function Carousel(_ref){var children=_ref.children,width=_ref.width,customBackground=_ref.customBackground;var _React$useState=React.useState([]),_React$useState2=_slicedToArray(_React$useState,2),items=_React$useState2[0],setItems=_React$useState2[1];var _React$useState3=React.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),offset=_React$useState4[0],setOffset=_React$useState4[1];var _React$useState5=React.useState(0),_React$useState6=_slicedToArray(_React$useState5,2),maxOffset=_React$useState6[0],setMaxOffset=_React$useState6[1];var handleSetMaxOffset=function handleSetMaxOffset(){setMaxOffset(-(width*(items.length-1)));};var handleLeftArrowClick=function handleLeftArrowClick(){setOffset(function(currentOffset){return Math.min(currentOffset+width,0);});};var handleRightArrowClick=function handleRightArrowClick(){handleSetMaxOffset();setOffset(function(currentOffset){return Math.max(currentOffset-width,maxOffset);});};React.useEffect(function(){setOffset(0);setItems(React.Children.map(children,function(child,index){return/*#__PURE__*/React.cloneElement(child,{style:{height:'100%',minWidth:\"\".concat(width,\"px\"),maxWidth:\"\".concat(width,\"px\"),background:index===0?customBackground:''}});}));handleSetMaxOffset();},[children]);return/*#__PURE__*/_jsxs(\"div\",{className:\"carousel-mainContainer\",children:[offset!==0&&/*#__PURE__*/_jsx(FaChevronLeft,{className:\"arrow\",onClick:handleLeftArrowClick})||/*#__PURE__*/_jsx(\"div\",{className:\"arrow--disable\"}),/*#__PURE__*/_jsx(\"div\",{className:\"carousel-mainContainer-window\",children:/*#__PURE__*/_jsx(\"div\",{className:\"all-items-container\",style:{transform:\"translateX(\".concat(offset,\"px)\")},children:items})}),offset!==-(width*(items.length-1))&&/*#__PURE__*/_jsx(FaChevronRight,{className:\"arrow\",onClick:handleRightArrowClick})||/*#__PURE__*/_jsx(\"div\",{className:\"arrow--disable\"})]});};export default Carousel;","map":{"version":3,"names":["React","FaChevronLeft","FaChevronRight","Carousel","children","width","customBackground","useState","items","setItems","offset","setOffset","maxOffset","setMaxOffset","handleSetMaxOffset","length","handleLeftArrowClick","currentOffset","Math","min","handleRightArrowClick","max","useEffect","Children","map","child","index","cloneElement","style","height","minWidth","maxWidth","background","transform"],"sources":["/Users/poppie/Desktop/development/messenger/app/frontend/src/components/Carousel/index.tsx"],"sourcesContent":["import React from 'react';\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\nimport './Carousel.scss';\nconst Carousel = ({children, width, customBackground}: {\n    children: any;\n    width: number;\n    customBackground?: string;\n}) => {\n    const [items, setItems] = React.useState<React.ReactNode[]>([]);\n    const [offset, setOffset] = React.useState<number>(0);\n    const [maxOffset, setMaxOffset] = React.useState<number>(0);\n\n    const handleSetMaxOffset = (): void => {\n        setMaxOffset(\n            -(width * (items.length - 1))\n        );\n    }\n\n    const handleLeftArrowClick = () => {\n        setOffset((currentOffset) => {\n            return Math.min(currentOffset + width, 0);\n        });\n    }\n\n    const handleRightArrowClick = () => {\n        handleSetMaxOffset();\n        setOffset((currentOffset) => {\n            return Math.max(currentOffset - width, maxOffset);\n        });\n    }\n\n    React.useEffect(() => {\n        setOffset(0);\n        setItems(\n            React.Children.map(children, (child, index) => {\n                return React.cloneElement(child, {\n                    style: {\n                        height: '100%',\n                        minWidth: `${width}px`,\n                        maxWidth: `${width}px`,\n                        background: (index === 0)? customBackground:''\n                    }\n                });\n            })\n        );\n        handleSetMaxOffset();\n    }, [children]);\n\n    return (\n        <div className=\"carousel-mainContainer\">\n            {(offset !== 0 &&\n                <FaChevronLeft className=\"arrow\" onClick={handleLeftArrowClick}/>) ||\n                <div className='arrow--disable'/>\n            }\n            <div className=\"carousel-mainContainer-window\">\n                <div className=\"all-items-container\"\n                    style={{\n                        transform: `translateX(${offset}px)`\n                    }}\n                >\n                    {items}\n                </div>\n            </div>\n            {(offset !== -(width * (items.length - 1)) &&\n                <FaChevronRight className=\"arrow\" onClick={handleRightArrowClick}/>) ||\n                <div className='arrow--disable'/>\n            }\n        </div>\n    );\n}\n\nexport default Carousel;"],"mappings":"8IAAA,MAAOA,MAAK,KAAM,OAAO,CACzB,OAASC,aAAa,CAAEC,cAAc,KAAQ,gBAAgB,CAC9D,MAAO,iBAAiB,CAAC,wFACzB,GAAMC,SAAQ,CAAG,QAAXA,SAAQ,MAIR,IAJaC,SAAQ,MAARA,QAAQ,CAAEC,KAAK,MAALA,KAAK,CAAEC,gBAAgB,MAAhBA,gBAAgB,CAKhD,oBAA0BN,KAAK,CAACO,QAAQ,CAAoB,EAAE,CAAC,oDAAxDC,KAAK,qBAAEC,QAAQ,qBACtB,qBAA4BT,KAAK,CAACO,QAAQ,CAAS,CAAC,CAAC,qDAA9CG,MAAM,qBAAEC,SAAS,qBACxB,qBAAkCX,KAAK,CAACO,QAAQ,CAAS,CAAC,CAAC,qDAApDK,SAAS,qBAAEC,YAAY,qBAE9B,GAAMC,mBAAkB,CAAG,QAArBA,mBAAkB,EAAe,CACnCD,YAAY,CACR,EAAER,KAAK,EAAIG,KAAK,CAACO,MAAM,CAAG,CAAC,CAAC,CAAC,CAChC,CACL,CAAC,CAED,GAAMC,qBAAoB,CAAG,QAAvBA,qBAAoB,EAAS,CAC/BL,SAAS,CAAC,SAACM,aAAa,CAAK,CACzB,MAAOC,KAAI,CAACC,GAAG,CAACF,aAAa,CAAGZ,KAAK,CAAE,CAAC,CAAC,CAC7C,CAAC,CAAC,CACN,CAAC,CAED,GAAMe,sBAAqB,CAAG,QAAxBA,sBAAqB,EAAS,CAChCN,kBAAkB,EAAE,CACpBH,SAAS,CAAC,SAACM,aAAa,CAAK,CACzB,MAAOC,KAAI,CAACG,GAAG,CAACJ,aAAa,CAAGZ,KAAK,CAAEO,SAAS,CAAC,CACrD,CAAC,CAAC,CACN,CAAC,CAEDZ,KAAK,CAACsB,SAAS,CAAC,UAAM,CAClBX,SAAS,CAAC,CAAC,CAAC,CACZF,QAAQ,CACJT,KAAK,CAACuB,QAAQ,CAACC,GAAG,CAACpB,QAAQ,CAAE,SAACqB,KAAK,CAAEC,KAAK,CAAK,CAC3C,mBAAO1B,KAAK,CAAC2B,YAAY,CAACF,KAAK,CAAE,CAC7BG,KAAK,CAAE,CACHC,MAAM,CAAE,MAAM,CACdC,QAAQ,WAAKzB,KAAK,MAAI,CACtB0B,QAAQ,WAAK1B,KAAK,MAAI,CACtB2B,UAAU,CAAGN,KAAK,GAAK,CAAC,CAAGpB,gBAAgB,CAAC,EAChD,CACJ,CAAC,CAAC,CACN,CAAC,CAAC,CACL,CACDQ,kBAAkB,EAAE,CACxB,CAAC,CAAE,CAACV,QAAQ,CAAC,CAAC,CAEd,mBACI,aAAK,SAAS,CAAC,wBAAwB,WACjCM,MAAM,GAAK,CAAC,eACV,KAAC,aAAa,EAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAEM,oBAAqB,EAAE,eACjE,YAAK,SAAS,CAAC,gBAAgB,EAAE,cAErC,YAAK,SAAS,CAAC,+BAA+B,uBAC1C,YAAK,SAAS,CAAC,qBAAqB,CAChC,KAAK,CAAE,CACHiB,SAAS,sBAAgBvB,MAAM,OACnC,CAAE,UAEDF,KAAK,EACJ,EACJ,CACJE,MAAM,GAAK,EAAEL,KAAK,EAAIG,KAAK,CAACO,MAAM,CAAG,CAAC,CAAC,CAAC,eACtC,KAAC,cAAc,EAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAEK,qBAAsB,EAAE,eACnE,YAAK,SAAS,CAAC,gBAAgB,EAAE,GAEnC,CAEd,CAAC,CAED,cAAejB,SAAQ"},"metadata":{},"sourceType":"module"}